import React, {FC, useCallback, useEffect, useMemo} from "react";
import "./css/Login.less";
import loginImg from "../../images/background.jpg";
import logoImg from "../../images/logo.png";
import {useTranslation} from "react-i18next";
import {getPublicKey, JsEncryptPsw, login} from "../services/SecurityService.tsx";
import Config from "../Config.tsx";
import {Button, Form, Input} from "antd";
import {changeLanguage, defaultLanguage, getI18n} from "../../i18n/i18n.tsx";
import GlobalIcon from "../global/GlobalIcon.tsx";

interface LoginProps {
}

const Login: FC<LoginProps> = (props) => {
    const {t} = useTranslation();

    useEffect(() => {
        getPublicKey();
    }, []);

    const handleFinish = useCallback(async (values = {}) => {
        values.password = await JsEncryptPsw(values.password);
        login(values)
    }, []);

    const handleChangeLanguage = useCallback((n) => {
        changeLanguage(n)
    }, [])

    const renderLogin = useMemo(() => {
        return (
            <div className="sf_core_login">
                <div className="sf_core_login_img">
                    <img src={loginImg}/>
                </div>
                <div className="sf_core_login_logo">
                    <img alt="" src={logoImg}/>
                    <span className="sf_core_login_logo_split"></span>
                    <span>{Config.title}</span>
                </div>
                <div className="sf_core_login_language">
                    {defaultLanguage.map((n, i) => {
                        return (
                            <>
                                <span className={getI18n() === n ? "cur_language" : ""}
                                      onClick={() => (handleChangeLanguage(n))}>{t(n)}</span>
                                {i !== defaultLanguage.length - 1 && <span>/</span>}
                            </>
                        )
                    })}
                </div>
                <div className="sf_core_login_content">
                    <div className="sf_core_login_content_title">
                        {t("userLogin")}
                    </div>
                    <div className="sf_core_login_content_form">
                        <Form
                            onFinish={handleFinish}
                        >
                            <Form.Item
                                name="username"
                                rules={[{required: true, message: t("inputUsername")}]}
                            >
                                <Input prefix={<GlobalIcon name="icon-user"/>} placeholder={t("username")}/>
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[{required: true, message: t("inputpwd")}]}
                            >
                                <Input prefix={<GlobalIcon name="icon-password"/>} placeholder={t("pwd")}/>
                            </Form.Item>
                            <Form.Item>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                >
                                    {t('login')}
                                </Button>
                            </Form.Item>
                            <Form.Item>
                                <Button
                                    type="link"
                                    className="sf_core_login_content_form_download"
                                >
                                    {t('downloadOperationManual')}
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        )
    }, [props]);

    return (renderLogin);
};

export default React.memo(Login);